<!--上传弹窗-->
<template>
    <Layer :layer="layer" @confirm="clickConfirm">
        <el-upload class="upload-pop" ref="uploadRef" drag :action="layer.action" :data="layer.data" :limit="1" :on-success="uploadSuccess" :auto-upload="!layer.showButton">
            <el-icon class="el-icon--upload">
                <upload-filled />
            </el-icon>

            <div class="el-upload__text">
                拖动文件至此 或者
                <em>点击上传</em>
            </div>
        </el-upload>
        <slot></slot>
    </Layer>
</template>

<script setup lang="ts">
import Layer                 from '@/components/layer/index.vue'
import {UploadFilled}        from '@element-plus/icons-vue'
import {defineProps}         from 'vue'
import {ElMessage}           from "element-plus/es";
import {ref}                 from 'vue'
import type {UploadInstance} from 'element-plus'

const uploadRef = ref<UploadInstance>()

const props = defineProps({
    layer: {
        type   : Object,
        default: () => {
            return {
                show        : false,
                title       : '',
                showButton  : false,
                action      : "",
                data        : {},
                checkProcess: () => {return true},
            }
        }
    }
})

/**
 * 上传成功
 * @param result
 */
function uploadSuccess(result: any) {
    if (result?.code !== 200) {
        ElMessage.error(result?.msg)
    }
}

/**
 * 点击确认
 */
function clickConfirm() {
    // 如果有检查程序,则检查程序必须给出成功才能继续
    if (props.layer.checkProcess && !props.layer.checkProcess()) {
        return
    }

    uploadRef.value!.submit()
}
</script>

<style lang="scss" scoped>
.upload-pop {
    width: 100% !important;

    //影响更深层的样式
    :deep(.el-upload--text) {
        width: 100%;

        .el-upload-dragger {
            width: 100% !important;
        }
    }
}
</style>
